@use "scss/colors";
@use "scss/mixins";
@use "scss/variables";
@use "scss/z-indices";

.container {
  position: relative;
  display: inline-flex;
}

.tooltip {
  @include mixins.shadow;

  font-size: variables.$font-size-sm;
  line-height: initial;
  padding: variables.$spacing-md;
  border-radius: variables.$border-radius-sm;
  max-width: 400px;
  max-height: 50vh; // Make sure the tooltip doesn't overflow the viewport
  overflow-y: auto;
  z-index: z-indices.$tooltip;
  background: colors.$dark-blue-900;
  color: colors.$foreground;

  a {
    color: colors.$blue-100;
  }

  &.light {
    background: colors.$foreground;
    color: colors.$dark-blue;

    a {
      color: colors.$blue;
    }
  }
}
